import facecat from "facecat"
import facecat_ws from "facecat_ws"

let gPaint = new facecat.FCPaint();
let that = null;

// index.js
// 获取应用实例
const app = getApp()
Page({
    data: {
        canvasWidth:0,
        canvasHeight:0,
        facecatStyle:"",
        facecatContent:"",
        facecatFocus:false
      },
      bindInputChange: function(e) {  
        if(gPaint.editingTextBox){
            gPaint.editingTextBox.text = e.detail.value;
            facecat.invalidateView(gPaint.editingTextBox);
            gPaint.editingTextBox = null;
            gPaint.app.setData({
                facecatStyle: "position:absolute;left:0px;top:0px;width:0px;height:0px;display:none;", 
                facecatFocus:false,
                facecatContent:""
             })
        }
      },
      touchStartCanvas: function (e) {
        facecat_ws.handleTouchStart(gPaint, e, null);
      },touchMoveCanvas: function (e) {
        facecat_ws.handleTouchMove(gPaint, e, null);
      },touchEndCanvas: function (e) {
        facecat_ws.handleTouchEnd(gPaint, e, null, null);
      },
  onLoad() {
      that = this;
    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((cres) => {       
        wx.getSystemInfo({
            success: function(res) {
                that.setData({
                    canvasWidth: res.windowWidth,  
                    canvasHeight: res.windowHeight
                 })
                cres[0].width = res.windowWidth;
                cres[0].height = res.windowHeight;
            }
        });   
        facecat_ws.scaleCanvas(gPaint, cres);
        //解析加载XML
        let xml = `<?xml version="1.0" encoding="utf-8"?>
        <html xmlns="facecat">
          <head>
          </head>
          <body>
            <div dock="fill" type="tab" selectedindex="0">
              <div name="TabPage" text="可视化生成" type="tabpage">
                <div type="tab" name="TabView" text="TabView" location="27,18" size="397,268" selectedindex="0">
                  <div name="TabPage3" text="TabPage3" type="tabpage">
                    <input type="button" name="Button" text="Button" location="27,47" size="100,20" />
                    <input type="button" name="Button2" text="Button2" location="27,103" size="100,20" />
                  </div>
                  <div name="TabPage4" text="TabPage4" type="tabpage">
                    <table name="Grid" text="Grid" location="22,22" size="200,200">
                      <tr>
                        <th name="FCGridColumn" text="FCGridColumn">FCGridColumn</th>
                        <th name="FCGridColumn2" text="FCGridColumn2">FCGridColumn2</th>
                      </tr>
                      <tr>
                        <td>Cell1</td>
                        <td>Cell2</td>
                      </tr>
                    </table>
                  </div>
                  <div name="TabPage5" text="TabPage5" type="tabpage" />
                  <div name="TabPage6" text="TabPage6" type="tabpage" />
                  <div name="TabPage7" text="TabPage7" type="tabpage" />
                </div>
              </div>
              <div name="TabPage2" text="代码创建" type="tabpage" />
            </div>
          </body>
        </html>`;
	    facecat_ws.renderFaceCatWeChat(gPaint, xml, that);
        //获取第二页
        let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
        let tabView2 = new facecat.FCTabView();
        tabView2.borderColor = "rgb(150,150,150)";
        tabView2.location = new facecat.FCPoint(50, 50);
        tabView2.size = new facecat.FCSize(400, 300);
        facecat.addViewToParent(tabView2, tabPage);
        for (let i = 0; i < 4; i++) {
            let newTabPage = new facecat.FCTabPage();
            let tabButton = new facecat.FCView();
            tabButton.size = new facecat.FCSize(100, 20);
			tabButton.viewType = "tabbutton";
            tabButton.text = "选项" + i;
            tabButton.backColor = "rgb(255,255,255)";
            tabButton.textColor = "rgb(0,0,0)";
            tabButton.borderColor = "rgb(150,150,150)";
            facecat.addTabPage(tabView2, newTabPage, tabButton);
        }
        facecat.updateTabLayout(tabView2);		
    })
  }
})
